{% extends "admin/base.html" %}

{% block title %}账户设置{% endblock %}

{% block content %}
<div class="account-container">
    <!-- 页面头部 -->
    <div class="account-header">
        <h1><i class="fas fa-user-cog"></i> 账户设置</h1>
        <p class="account-subtitle">管理您的账户安全和隐私设置</p>
    </div>

    <!-- 账户设置内容 -->
    <div class="account-content">
        <!-- 修改密码 -->
        <div class="settings-section">
            <div class="form-card">
                <div class="form-header">
                    <h2><i class="fas fa-lock"></i> 修改密码</h2>
                    <p>定期更新密码以保护账户安全</p>
                </div>
                
                <form id="password-form" class="password-form">
                    <div class="form-group">
                        <label for="current-password" class="form-label">当前密码 *</label>
                        <input type="password" id="current-password" name="current_password" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="new-password" class="form-label">新密码 *</label>
                        <input type="password" id="new-password" name="new_password" class="form-control" required minlength="6">
                        <small class="form-text">密码长度至少6位</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="confirm-password" class="form-label">确认新密码 *</label>
                        <input type="password" id="confirm-password" name="confirm_password" class="form-control" required>
                    </div>
                    
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> 修改密码
                        </button>
                        <button type="button" class="btn btn-secondary" onclick="resetPasswordForm()">
                            <i class="fas fa-undo"></i> 重置
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 账户信息 -->
        <div class="settings-section">
            <div class="form-card">
                <div class="form-header">
                    <h2><i class="fas fa-info-circle"></i> 账户信息</h2>
                    <p>查看您的账户基本信息</p>
                </div>
                
                <div class="account-info">
                    <div class="info-item">
                        <label>用户ID</label>
                        <span>{{ current_user.id }}</span>
                    </div>
                    <div class="info-item">
                        <label>用户名</label>
                        <span>{{ current_user.username }}</span>
                    </div>
                    <div class="info-item">
                        <label>角色</label>
                        <span class="role-badge role-{{ current_user.role }}">
                            {% if current_user.role == 'admin' %}管理员
                            {% elif current_user.role == 'author' %}作者
                            {% else %}{{ current_user.role }}{% endif %}
                        </span>
                    </div>
                    <div class="info-item">
                        <label>注册时间</label>
                        <span>{{ current_user.created_at.strftime('%Y-%m-%d %H:%M') if current_user.created_at else '未知' }}</span>
                    </div>
                    <div class="info-item">
                        <label>最后更新</label>
                        <span>{{ current_user.updated_at.strftime('%Y-%m-%d %H:%M') if current_user.updated_at else '未知' }}</span>
                    </div>
                    <div class="info-item">
                        <label>账户状态</label>
                        <span class="status-badge status-{{ 'active' if current_user.is_active else 'inactive' }}">
                            {% if current_user.is_active %}正常{% else %}已禁用{% endif %}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.account-container {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,.1);
    overflow: hidden;
    margin: 0;
}

.account-header {
    padding: 2rem 2rem 1rem;
    border-bottom: 1px solid #e1e8ed;
}

.account-header h1 {
    margin: 0 0 0.5rem 0;
    color: #2c3e50;
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.account-subtitle {
    margin: 0;
    color: #6c757d;
    font-size: 0.875rem;
}

.account-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.settings-section {
    width: 100%;
}

.form-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid #e1e8ed;
}


.form-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e1e8ed;
}

.form-header h2 {
    margin: 0 0 0.5rem 0;
    color: #2c3e50;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-header p {
    margin: 0;
    color: #6c757d;
    font-size: 0.875rem;
}

.password-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
}

.form-control {
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    background: #fff;
}

.form-control:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.form-text {
    font-size: 0.75rem;
    color: #6c757d;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e1e8ed;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-primary {
    background: #007bff;
    color: #fff;
}

.btn-primary:hover {
    background: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.btn-secondary {
    background: #6c757d;
    color: #fff;
}

.btn-secondary:hover {
    background: #5a6268;
}

.btn-outline-primary {
    background: transparent;
    color: #007bff;
    border: 1px solid #007bff;
}

.btn-outline-primary:hover {
    background: #007bff;
    color: #fff;
}

.btn-danger {
    background: #dc3545;
    color: #fff;
}

.btn-danger:hover {
    background: #c82333;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

/* 账户信息样式 */
.account-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e1e8ed;
}

.info-item:last-child {
    border-bottom: none;
}

.info-item label {
    font-weight: 500;
    color: #495057;
    font-size: 0.875rem;
}

.info-item span {
    color: #6c757d;
    font-size: 0.875rem;
}

.role-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.role-admin {
    background: #d4edda;
    color: #155724;
}

.role-author {
    background: #cce5ff;
    color: #004085;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active {
    background: #d4edda;
    color: #155724;
}

.status-inactive {
    background: #f8d7da;
    color: #721c24;
}


/* 响应式设计 */
@media (max-width: 768px) {
    .account-content {
        padding: 1rem;
        gap: 1.5rem;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn {
        justify-content: center;
    }
    
    .info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
}
</style>
{% endblock %}

{% block extra_js %}
<script>
// 密码表单重置
function resetPasswordForm() {
    if (confirm('确定要重置密码表单吗？')) {
        document.getElementById('password-form').reset();
    }
}

// 密码表单提交
document.getElementById('password-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const currentPassword = document.getElementById('current-password').value;
    const newPassword = document.getElementById('new-password').value;
    const confirmPassword = document.getElementById('confirm-password').value;
    
    // 验证新密码
    if (newPassword.length < 6) {
        Utils.notification.show('新密码长度至少6位', 'error');
        return;
    }
    
    // 验证确认密码
    if (newPassword !== confirmPassword) {
        Utils.notification.show('两次输入的密码不一致', 'error');
        return;
    }
    
    const data = {
        current_password: currentPassword,
        new_password: newPassword,
        confirm_password: confirmPassword
    };
    
    fetch('/admin/account/password', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            Utils.notification.show('密码修改成功', 'success');
            document.getElementById('password-form').reset();
        } else {
            Utils.notification.show(data.message || '密码修改失败', 'error');
        }
    })
    .catch(error => {
        console.error('修改失败:', error);
        Utils.notification.show('修改失败，请稍后重试', 'error');
    });
});


// 页面加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 初始化表单验证
    const passwordForm = document.getElementById('password-form');
    const inputs = passwordForm.querySelectorAll('input[required]');
    
    inputs.forEach(input => {
        input.addEventListener('blur', function() {
            if (!this.value.trim()) {
                this.style.borderColor = '#dc3545';
            } else {
                this.style.borderColor = '#ced4da';
            }
        });
    });
    
    // 密码确认验证
    const confirmPassword = document.getElementById('confirm-password');
    const newPassword = document.getElementById('new-password');
    
    confirmPassword.addEventListener('input', function() {
        if (this.value && this.value !== newPassword.value) {
            this.style.borderColor = '#dc3545';
        } else {
            this.style.borderColor = '#ced4da';
        }
    });
});
</script>
{% endblock %}


